//待审核页面
import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { getSingleResult } from '@/api/csy/api'
import '../../../../css/maintenan/Shen.less'
import img1 from '../../../../../../assets/yzfimg/v2_saopew.png'
import img2 from '../../../../../../assets/yzfimg/v2_saor6t.png'
import { updateSingleResult } from '@/api/csy/api'
import { message } from 'antd'
interface Props {
    time?: string;
    [key: string]: any;
}

const Shen: React.FC = () => {
    const id = useLocation().state
    const [data, setData] = useState<Props>({})
    const [val, setVal] = useState<string>('')
    const getdata = () => {
        //根据id获取数据
        getSingleResult({ daily: id }).then(res => {
            if (res.data.code == 200) {
                setData(res.data.data)
            }
        })
    }
    useEffect(() => {
        getdata()
    }, [])
    const dian = (val: string) => {
        console.log(val);
        setVal(val)
    }

    //修改
    const dianji = () => {
        updateSingleResult({ daily: id, state: val }).then(res => {
            if (res.data.code == 200) {
                message.success('修改成功')
                navigate('/service/Operational/maintenance/DailyMaintenance/indexDaily')
            }
        })
    }
    const navigate = useNavigate()
    const quxiao = () => {
        navigate('/service/Operational/maintenance/DailyMaintenance/indexDaily')
    }

    return (
        <div className="maintenance-detail">
            <header className="header">
                <h1>要换处理详情</h1>
            </header>
            <div className="detail-section">
                <div className="info-row">
                    <label>工程名称:</label>
                    <span>{data.name}</span>
                </div>
                <div className="info-row">
                    <label>维修原因:</label>
                    <span>{data.yuan}</span>
                </div>
                <div className="info-row">
                    <label>关联设备:</label>
                    <span>1号闸门</span>
                </div>
                <div className="info-row">
                    <label>维修前照片:</label>
                    <div className="photo-group">
                        <img src={img1} alt="维修前1" className="photo" />
                        <img src={img2} alt="维修前2" className="photo" />
                    </div>
                </div>
                <div className="info-row">
                    <label>计划完成时间:</label>
                    <span>{data.time}</span>
                </div>
                <div className="info-row">
                    <label>指派处理人员:</label>
                    <span>{data.zhiding}</span>
                </div>
                <div className="info-row">
                    <label>任务下达人:</label>
                    <span>{data.person}</span>
                </div>
            </div>

            <div className="photo-section">
                <div className="info-row">
                    <label>维修完成照片:</label>
                    <img src={img1} alt="维修前1" className="photo" />
                </div>
            </div>

            <div className="detail-section" style={{ position: 'relative' }}>

                <div className="info-row">
                    <label>录音:</label>
                    <span>--</span>
                </div>
                <div className="info-row">
                    <label>完成时间:</label>
                    <span>2022-05-01</span>
                </div>
                <div className="info-row">
                    <label>记录人员:</label>
                    <span>王明</span>
                </div>
                <div className="info-row">
                    <label>状态:</label>
                    <span>已处理</span>
                </div>
                <div className='infow' >
                    <div className="info-row">
                        <label>维修设备:</label>
                        <span>闸1</span>
                    </div>
                    <div className="info-row">
                        <label>维修部位:</label>
                        <span>止水橡胶</span>
                    </div>
                    <div className="info-row">
                        <label>维修内容:</label>
                        <span>对止水橡胶进行更换</span>
                    </div>
                </div>
            </div>
            <div className="footer">
                <label>审核:</label>
                <div className="radio-group">
                    <label>
                        <input type="radio" name="approval" value="pass" onClick={() => dian('已审核')} defaultChecked /> 通过
                    </label>
                    <label>
                        <input type="radio" name="approval" value="fail" onClick={() => dian('待处理')} /> 不通过
                    </label>
                </div>
                <button className="cancel-button" onClick={quxiao}>取消</button>
                <button className="submit-button" onClick={() => dianji()}>提交</button>
            </div>
        </div>
    );
}

export default Shen